<template>
  <div class="winning-box" @click="openHistoryPopup">
    <div class="periods">{{ periods }}期开奖结果</div>

    <div class="result-box">
      <ul class="winning-box-number">
        <li v-for="(item, index) in lastPeriodsResult" :key="index" class="all-center">
          <div v-if="index !== 0" class="num-symbol all-center">
            {{ index === lastPeriodsResult.length - 1 ? '=' : '+' }}
          </div>
          <div class="box all-center" :class="{ effect: index === lastPeriodsResult.length - 1, 'box-rally': isRally }">
            <p class="all-center">{{ item.number }}</p>
          </div>
        </li>
      </ul>
      <arrowAnimate ref="arrowRef" color="#fff"  :style="{ 'margin-left': '0.04rem' }" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import arrowAnimate from '@/components/arrow-animate.vue'
import { GAME_STATUS_CODE } from '@/enum'
import { useGameStore } from '@/stores/game'
import { findHistoryPage } from '@/api'
import { $utils } from '@utils'

const lastPeriodsResult = ref([])

const gameStore = useGameStore()

const periods = ref('')

const rally = ['QXC']
const isRally = computed(() => rally.includes(gameStore.currentGame))

const fetchHistory = async () => {
  let query = {
    current: 1,
    size: 3,
    lotteryCode: gameStore.currentGame,
  }
  const {
    data: { records },
  } = await findHistoryPage(query)
  if (records?.length) {
    let { drawingResult, periodsNumber } = records.find((item) => !!item.drawingResult) // 最新一期开奖数据

    lastPeriodsResult.value = handleList(drawingResult)
    periods.value = periodsNumber
  }
}

const handleList = (drawingResult) => {
  let numArr = drawingResult
  if ($utils.isEmpty(numArr)) return []
  if (!Array.isArray(numArr)) {
    numArr = drawingResult.split(',')
  }
  let arr = numArr.concat([])
  let sum = numArr.reduce((prev, current) => Number(prev) + Number(current), 0) // 等号右边的和
  arr.push(sum)
  let newArr = []
  arr.forEach((item) => {
    newArr.push({
      number: item,
    })
  })
  return newArr
}

const emits = defineEmits(['openHistoryPopup'])

const arrowRef = ref()

const openHistoryPopup = () => {
  arrowRef.value?.rotateArrow?.()
  emits('openHistoryPopup')
}

fetchHistory()

watch(
  () => gameStore.drawingStatus,
  (newValue) => {
    // 当 code == 40时, 说明已经开奖, 要从历史接口更新开奖数据
    if (newValue.code === GAME_STATUS_CODE.kaijiang.code) {
      fetchHistory()
    }
  },
)
</script>

<style scoped lang="less">
.winning-box {
  width: 100%;

  .periods {
    height: 20px;
    line-height: 22px;
    margin-bottom: 8px;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    font-family: 'DIN';
  }

  &-number {
    display: flex;
    align-items: center;
    font-family: PingFang SC;
    font-weight: 400;

    .num-symbol {
      color: #fff;
      font-size: 15px;
      box-sizing: border-box;
      padding: 0 1px;
    }

    .box {
      width: 26px;
      height: 26px;
      position: relative;
      &:not(.effect) {
        color: #008ddc;
        background: url('@/assets/img/game/win_number_rally.svg') center center no-repeat;
        background-size: contain;
      }

      &.effect {
        color: rgba(254, 92, 115, 1);
        background: url('@/assets/img/game/win_number_result_bg.svg') center center no-repeat;
        background-size: contain;
      }
    }

    .box-rally {
      &:not(.effect) {
        color: rgba(105, 80, 255, 1);
        background: url('@/assets/img/game/win_number_result_blue.svg') center center no-repeat;
        background-size: contain;
      }
    }
  }
}

.result-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
